<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(1000px);
        }
        .v-enter-active,.v-leave-active{
            transition: all 3s ease;
        }
        .an-enter,.an-leave-to{
            opacity: 0;
            transform: translateX(500px);
        }
        .an-enter-active,.an-leave-active{
            transition:all 2s ease;
        }
    </style>
</head>
<script src="vue.js"></script>
<body>
    <!-- 
        Vue动画效果
        vue给我们提供了一些做动画的效果
     -->
     <!-- 1.点击按钮实现p标签的显示与隐藏的切换 -->
     <div id="app">
     <input type="button" value="出来吧!" v-on:click="flag=!flag">
     <!-- 2.把要做动画的元素，用transition包裹住 -->
     <transition>
     <p v-if="flag">主人,我是你的小熊</p>
     </transition>

     <transition name="an">
        <p v-if="flag">我是你的anni</p>
        </transition>
    </div>

     <script>
         var vm = new Vue({
            el:'#app',
            data:{
                flag:false,
            }
         })
     </script>
</body>
</html>